<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加旅行社</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body { background: #f8f9fb; font-family: 'Microsoft YaHei', Arial, sans-serif; }
        .container { max-width: 500px; margin: 60px auto; background: #fff; border-radius: 18px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 40px 36px; }
        .form-wrap { width: 100%; }
        h2 { text-align: center; font-size: 32px; margin-bottom: 32px; font-weight: bold; letter-spacing: 2px; }
        .form-row { margin-bottom: 22px; display: flex; align-items: center; }
        .form-row label { width: 90px; color: #333; font-size: 16px; }
        .form-row input, .form-row select, .form-row textarea {
            flex: 1; padding: 10px 14px; border: 1px solid #e6e6e6; border-radius: 8px; font-size: 16px; background: #f6f8fa;
        }
        .form-row textarea { resize: vertical; min-height: 60px; }
        .form-actions { display: flex; justify-content: space-between; margin-top: 30px; }
        .form-actions button { min-width: 100px; padding: 10px 0; font-size: 18px; border-radius: 8px; border: none; cursor: pointer; }
        .form-actions .submit-btn { background: #1890ff; color: #fff; }
        .form-actions .reset-btn { background: #fff; color: #1890ff; border: 1px solid #1890ff; }
        .form-actions .back-btn { background: #bdbdbd; color: #fff; }
        .form-actions .submit-btn:hover { background: #40a9ff; }
        .form-actions .reset-btn:hover { background: #e6f7ff; }
        .form-actions .back-btn:hover { background: #888; }
    </style>
</head>
<body>
<div class="container">
    <div class="form-wrap">
        <h2>添加旅行社</h2>
        <form id="routeForm" autocomplete="off">
            <div class="form-row">
                <label for="name">名称</label>
                <input type="text" id="name" name="name" required placeholder="请输入旅行社名称">
            </div>
            <div class="form-row">
                <label for="scenic">选择景点</label>
                <select id="scenic" name="scenic" required style="color:#bdbdbd;">
                    <option value="" disabled selected hidden>请选择景点</option>
                </select>
            </div>
            <div class="form-row">
                <label for="route">选择旅行社</label>
                <select id="route" name="route" required style="color:#bdbdbd;">
                    <option value="" disabled selected hidden>请选择旅行社</option>
                </select>
            </div>
            <div class="form-row">
                <label for="description">描述</label>
                <textarea id="description" name="description" placeholder="请输入描述"></textarea>
            </div>
            <div class="form-actions">
                <button type="submit" class="submit-btn">提交</button>
                <button type="reset" class="reset-btn">重置</button>
                <button type="button" class="back-btn" onclick="window.location.href='manage.html'">返回列表</button>
            </div>
        </form>
    </div>
</div>
<script>
// 页面加载时自动加载景点和旅行社下拉选项
fetch('/api/scenic', { method: 'GET' })
    .then(response => response.json())
    .then(data => {
        var select = document.getElementById('scenic');
        select.innerHTML = '';
        if (Array.isArray(data) && data.length > 0) {
            data.forEach(function(item) {
                var opt = document.createElement('option');
                opt.value = item.id;
                opt.text = item.name;
                select.appendChild(opt);
            });
        }
    });
fetch('/api/route', { method: 'GET' })
    .then(response => response.json())
    .then(data => {
        var select = document.getElementById('route');
        select.innerHTML = '';
        if (Array.isArray(data) && data.length > 0) {
            data.forEach(function(item) {
                var opt = document.createElement('option');
                opt.value = item.id;
                opt.text = item.name;
                select.appendChild(opt);
            });
        }
    });
// 表单提交
 document.getElementById('routeForm').onsubmit = function(e) {
    e.preventDefault();
    var route = {
        name: document.getElementById('name').value.trim(),
        scenicId: document.getElementById('scenic').value,
        routeId: document.getElementById('route').value,
        description: document.getElementById('description').value.trim()
    };
    // 这里只做前端演示，实际保存逻辑请根据后端设计调整
    alert('提交成功！\n' + JSON.stringify(route, null, 2));
    window.location.href = 'manage.html';
};
// 下拉框选中后变为黑色，未选时为灰色
function updateSelectColor(select) {
    if (select.value === "") {
        select.style.color = '#bdbdbd';
    } else {
        select.style.color = '#333';
    }
}
document.getElementById('scenic').addEventListener('change', function() { updateSelectColor(this); });
document.getElementById('route').addEventListener('change', function() { updateSelectColor(this); });
// 页面加载后初始化颜色
updateSelectColor(document.getElementById('scenic'));
updateSelectColor(document.getElementById('route'));
</script>
</body>
</html> 